<template>
  <div class="login">
     <div class="login_box">
       <!--头像区域-->
       <div class="avatar_box">
         <img src="../assets/logo.png" alt="">
       </div>
       <!--登录区域-->
       <el-form :model="loginForm" :rules="loginFormRules" ref="loginFormref" class="login_form" >
        <el-form-item  prop='username' >
          <el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <el-form-item  prop='password'>
          <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
        </el-form-item>

        <el-form-item class="btns">
       <el-button type="primary" @click="login" >登录</el-button>
       <el-button type="info"  @click="resetForm('loginFormref')">重置</el-button>
      </el-form-item>
       </el-form>
    
     </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      //登录表单的数据绑定对象
      loginForm:{
        username:'admin',
        password:'123456',

      },
    //登录表单验证规则对象
        loginFormRules: {
          //用户名
          username: [
            //验证规则 ：  必填项   提示语句    失去焦点触发
            { required: true, message: '请输入登录名称', trigger: 'blur' },
            //验证规则：长度在3-5
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          password:[
             { required: true, message: '请输入密码', trigger: 'blur' },
             { min: 6, max: 15, message: '密码长度在 6到 15 个字符', trigger: 'blur' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ]
        },
       
    }   
  },
  methods: {
     //表单重置
        resetForm(formName){
      //    console.log(this) 
     //   this.$refs.loginFormref.resetFields() //对象中直接获取
          this.$refs[formName].resetFields();  //对象中取值

        },login(){
          this.$refs.loginFormref.validate(async valid=>{
            //console.log(valid)//true
           if (!valid) return;
           //	其实await与async本身就是promise化编程的一种语法糖。对比一下两种写法。
          const {data:res} = await  this.$http.post("login",this.loginForm)
            //console.log(res)
            if(res.meta.status==200){
                this.$message({
                showClose: true,
                message: res.meta.msg,
                type: 'success'
              });
             // console.log(res.data)
             //保存token
             window.sessionStorage.setItem("vue_shop_token",res.data.token)
             this.$router.push("/home");
            }else{
                this.$message({
                showClose: true,
                message: res.meta.msg,
                type: 'error'
              });
            }
          })
        }
  },
}
</script>
<style lang="less" scope>
 .login{
   background-color: #2b4b6b;
   height: 100%;
}
.login_box{
  width:450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  /**居中 */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  
  .avatar_box{
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
     padding: 10px;
     box-shadow: 0 0 10px #ddd;
    position: absolute;
     left: 50%;
     transform: translate(-50%,-50%);
     background-color: #fff;
    img{
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}
.login_form{
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.btns{
  display: flex;
  justify-content: flex-end;
}

</style>
